<div class="root-container">
  <div class="row" style="height:40px;">
    <button style="margin-left: 20px;" (click)="back()">返回</button>
    <button style="margin-left: 20px;" (click)="nppt()">NPPT</button>
    <button style="margin-left: 20px;" (click)="cppt()">CPPT</button>
    <span class="plane-title" [ngStyle]="{color:connStatus?'#4384A6':'#f00'}">车间设备状态看板</span>
  </div>
  <div id="nppt" style="display: flex; width: 100%; position: absolute;">
    <!-- CSS1 -->
    <div style="width:30%;">
      <div class="data-container">
        <span class="title-container">CSS1</span>
        <!-- 生产线状态 -->
        <section style="flex-grow: 1;">
          <!-- 装配 -->
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production.length>4" style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 机加工 -->
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="productionjjg.length>4" style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of productionjjg">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of productionjjg">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- 实时设备报警 -->
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="190" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <!-- 历史设备报警 -->
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="250" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- CSS5 -->
    <div style="width:30%;">
      <div class="data-container">
        <span class="title-container">CSS5</span>
        <section style="flex-grow: 1;">
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production2.length>4"  style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production2">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production2">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production2jjg.length>4"  style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production2jjg">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production2jjg">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="190" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="250" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- GFE2 -->
    <div style="width:40%;">
      <div class="data-container">
        <span class="title-container">GFE2</span>
        <section style="flex-grow: 1;">
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production3.length>5" style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production3">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production3">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标:</span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production3jjg.length>5"  style="display: inline-block; width: 88%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production3jjg">
                      <span class="label-tag"
                        style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production3jjg">
                    <span class="label-tag"
                      style="font-size: 15px;width: 85px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="190" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="250" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>


  <div id="cppt" style="display: none; position: absolute;" class="animation-windows">
    <!-- GF9装配 -->
    <div style="width:25%;">
      <div class="data-container">
        <span class="title-container">GF9装配</span>
        <section style="flex-grow: 1;">
          <div style="width: 100%;">
            <div style="display: inline-block; vertical-align: top;">
              <span class="product-tag">
                <span>目标: </span><br /><br />
                <span>实际:</span>
              </span>
            </div>
            <div [ngSwitch]="production4.length>2"  style="display: inline-block; width: 82%;">
              <div *ngSwitchCase="true">
                <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production4">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </marquee>
              </div>
              <div *ngSwitchCase="false">
                <div class="product-row" style="display: inline;">
                  <span class="product-tag" *ngFor="let i of production4">
                    <span class="label-tag"
                    style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                    {{i.jph}}</span><br /><br />
                    <span style="text-align: center;display: block;">
                      <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                      <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow4.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow4">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow4">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory4.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory4">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory4">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- GF9机加工 -->
    <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">GF9机加工</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top;">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production4jjg.length>2" style="display: inline-block; width: 82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production4jjg">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production4jjg">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow4jjg.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow4jjg">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow4jjg">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory4jjg.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory4jjg">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory4jjg">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- BEV3 -->
    <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">BEV3</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top;">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production5.length>2" style="display: inline-block; width:82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production5">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production5">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow5.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow5">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow5">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory5.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory5">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory5">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- phev -->
    <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">PHEV</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top;">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production_phev.length>2" style="display: inline-block; width:82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production_phev">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production_phev">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow_phev.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow_phev">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow_phev">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory_phev.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory_phev">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory_phev">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- bev -->
    <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">BEV</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top;">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production_bev.length>2" style="display: inline-block; width:82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production_bev">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production_bev">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow_bev.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow_bev">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow_bev">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory_bev.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory_bev">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory_bev">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    
    <!-- NCXB -->
    <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">NCXB</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production6.length>2" style="display: inline-block; width: 82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production6">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production6">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 250px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow6.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow6">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow6">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory6.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory6">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory6">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- HEV2 -->
    <!-- <div style="width:25%;">
      <div class="data-container">
          <span class="title-container">HEV2</span>
          <section style="flex-grow: 1;">
            <div style="width: 100%;">
              <div style="display: inline-block; vertical-align: top;">
                <span class="product-tag">
                  <span>目标: </span><br /><br />
                  <span>实际:</span>
                </span>
              </div>
              <div [ngSwitch]="production6.length>2" style="display: inline-block; width: 82%;">
                <div *ngSwitchCase="true">
                  <marquee behavior="scroll" direction=left style="float: right;" scrollamount="5">
                    <div class="product-row" style="display: inline;">
                      <span class="product-tag" *ngFor="let i of production6">
                        <span class="label-tag"
                        style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                        {{i.jph}}</span><br /><br />
                        <span style="text-align: center;display: block;">
                          <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                          style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                          <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                        </span>
                      </span>
                    </div>
                  </marquee>
                </div>
                <div *ngSwitchCase="false">
                  <div class="product-row" style="display: inline;">
                    <span class="product-tag" *ngFor="let i of production6">
                      <span class="label-tag"
                      style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                      {{i.jph}}</span><br /><br />
                      <span style="text-align: center;display: block;">
                        <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                        style="text-align: center;font-weight: 400;">上{{i.unhours}}</span>/
                        <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;font-weight: 400;">下{{i.hours}}</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        </section>
        <section style="flex-grow: 3;height: 250px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow6.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="220" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow6">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow6">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 368px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory6.length>5">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="320" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory6">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory6">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div> --> 
  </div>
  <div class="msg-container">
    <marquee behavior="scroll" direction=left>
      <strong>
        <span *ngFor="let i of alarmMessage" style="margin-left: 10px;">{{i}}</span>
      </strong>
    </marquee>
  </div>
</div>